<template>
  <div class="grouplookroom">
    <!-- 团购看房 -->
    <header>
      <p>
        <router-link to="/">《</router-link>
      </p>
      <p>团购看房</p>
      <p>
        <span>...</span>
        <span>o</span>
      </p>
    </header>
    <main>
      <dl v-for="(item,index) in tableData2" :key="index">
        <dt>
           <!-- @click="groupDetail(item.id)" -->
          <img :src="item.img" alt />
        </dt>
        <dd>
          <p>{{item.name}}</p>
          <p>{{item.area}}</p>
          <p>{{item.newtime}}</p>
          <!-- <p>
            <span>
              <a-switch checked-children="开" un-checked-children="关" default-checked />
            </span>
            <span>
              <button @click="startgroup(item.id)">开团</button>

              <button @click="Del(item.id)">删除</button>
            </span>
          </p> -->
        </dd>
      </dl>
    </main>
  </div>
</template>

<script>
import { tableData2 } from "../../../../api/index";
import axios from "axios";

export default {
   data() {
    return {
      tableData2: []
    };
  },
  created() {
    this.tabledata2();
  },
  methods: {
    tabledata2() {
      tableData2().then(res => {
        if (res.data.code === 0) {
          this.$router.push("/login");
          this.$toast(res.data.msg);
        } else {
          this.tableData2 = res.data.data;
        }
      });
    },

    // //进入详情页
    // groupDetail(id) {
    //   this.$router.push(`/Detail2/${id}`);
    // },

    // //进入详情页
    // startgroup(id) {
    //   this.$router.push(`/Startgroup/${id}`);
    // },

    // //删除数据
    // Del(id) {
    //   axios({
    //     url: "/api/tableDataDel2",
    //     method: "post",
    //     data: {
    //       id: id
    //     }
    //   }).then(res => {
    //     //调用函数
    //     this.tabledata2();
    //   });
    // }

  }
};
</script>

<style lang="scss" scoped>
.grouplookroom {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background-color: rgb(34, 100, 177);
    color: #fff;
    p:nth-child(3) {
      border: 1px solid rgb(226, 226, 226);
      width: 60px;
      height: 26px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  main {
    flex: 1;
    overflow-y: scroll;
    dl {
      width: 100%;
      height: 320px;
      border: 1px solid rgb(196, 196, 196);
      dt {
        width: 100%;
        height: 200px;

        img {
          width: 100%;
          height: 100%;
        }
      }
      dd {
        width: 90%;
        margin: 0 auto;
        p {
          margin-top: 5px;
        }
        p:first-child {
          font-weight: bold;
          font-size: 22px;
        }
        p:nth-child(4) {
          display: block;
          display: flex;
          justify-content: space-between;
          // span:first-child {
          //   button {

          //   }
          // }
          span:nth-child(2) {
            button {
              border-radius: 8px;
              width: 50px;
              height: 34px;
              color: rgb(0, 0, 0);
            }
            button:first-child {
              border: none;
              background-color: rgb(108, 155, 216);
            }
          }
        }
      }
    }
  }
}
</style>